<template>
	<div class="wrap">
		<head-title :title="headText" @callback="onClickLeft"></head-title>
		<div class="order wrapbd">
			<div class="orderdetail margin20">
				<div class="adddelation" v-if="addresslist.length == 0">
					<div @click="inCheckaddress">
						<p>请选择收货地址</p>
						<i class="fa fa-angle-right fa-2x" aria-hidden="true" style="top:.4rem"></i>
					</div>
				</div>
				<div class="adddelation" v-if="addresslist.length != 0">
					<span><h2 class="left">收货人：{{addresslist.user_name}}</h2><h2 class="right">{{addresslist.moble}}</h2></span>
					<div @click="inCheckaddress">
						<p>{{addresslist.areas}}{{addresslist.address}}</p>
						<i class="fa fa-angle-right fa-2x" aria-hidden="true"></i>
					</div>
				</div>
        <div class="adddelation" style="padding-top: .1rem;">
          <span class="c-title">支付方式</span>
          <radio-group v-model="checkout_type" class="isradio">
            <radio name="1" style="margin-right:.5rem;">在线支付</radio>
          </radio-group>
        </div>
        <div class="adddelation" style="padding-top: .1rem;">
          <span class="c-title">配送方式</span>
          <radio-group v-model="express_type" class="isradio">
            <radio name="1" style="margin-right:.5rem;" @click="changeExpressType(1)">物流发货</radio>
            <radio name="2" style="margin-right:.5rem;" @click="changeExpressType(2)">到店自提</radio>
          </radio-group>
          <span v-show="express_type==1" class="express-tips">运费：{{parseFloat(shopInfo.express_money)>0?shopInfo.express_money:'包邮'}}</span>
          <span v-show="express_type==2" class="express-tips">地址：{{shopInfo.address}}</span>
          <span v-show="express_type==2" class="express-tips">电话：{{shopInfo.mobile}}</span>
        </div>
        <div class="buynub">
          <h3 class="left">温馨提示：最终支付价格以实际生成订单为准。</h3>
          <!-- <div class="right">
                        <span class="left"><i class="fa fa-minus" aria-hidden="true" @click="reduceshop"></i></span>
                        <input class="left" v-model.trim="buynum" type="button">
                        <span class="right"><i class="fa fa-plus" aria-hidden="true" @click="addshop"></i></span>
                    </div> -->
        </div>
				<div class="productdetail" v-for="(item,index) in shopdetail.product_list" :key="index">
					<i class="left"><img :src="item.cover_img"></i>
					<span class="left"><p>{{item.product_name_full}}</p><label>剩余库存：{{item.shop_spec_stock}}</label><label>单价：{{item.unit_money}}</label><label>购买数量：{{item.buy_num}}</label></span>
					<b>￥{{item.unit_money * item.buy_num}}</b>
				</div>
        <div class="product-t">共<i>{{shopdetail.total_num}}</i>件，商品合计：<i>￥{{shopdetail.total_money}}</i></div>
			</div>
			<div class="allOrder">
				<p class="left">需支付：<label>￥{{needPay}}</label></p>
				<div class="sumbOrder right" @click="placeOrder">提交订单</div>
			</div>
		</div>
	</div>
</template>
<script>
	import HeadTitle from "./../../components/title.vue"
	import { Dialog,RadioGroup,Radio } from 'vant';
	export default {
		data(){
			return {
				headText: '填写订单',  //顶部标题
        checkout_type: '1',  //支付方式
        express_type: '1', //配送方式
				addresslist:{},   //收货地址
				shopdetail:{},  //商品详情
        shopInfo:{},  //店铺详情
        needPay:0,
				addressId:'',  //收货地址ID
				stock_num:'',  //库存
				// isDefault:'',  //判断是否为默认地址   1为是
				orderId:'',   //订单ID
        spec_id_url: this.$route.query.spec_id,
        postButton: true,
        orderNo: ''
			}
		},
		mounted(){
      var _this = this;
      _this.checkMoble(); //验证用户是否绑定手机号和微信号
      _this.initialize(); //拉取地址信息
      _this.inproductdetail();  //拉取商品详情信息
		},
		methods:{
			//左上角返回键
			onClickLeft () { this.$route.query.type == 1 ? this.$router.push('/shoppingcart') : this.$router.push('/mall')},
      // onClickLeft () { this.$router.go(-1);},
      checkMoble() {
        let _this = this;
        this.Tools.AXIOS({
          url: 'user/index',
          success: function (res) {
            if(!res.data.data.moble || !res.data.data.wechat){
              Dialog.alert({
                message: '必须绑定手机和微信才能下单。'
              }).then(() => {
                _this.$router.push({path:'myInformation'});
              })
            }
          }
        })
      },
			//获取地址信息
			initialize(){
				var _this = this;
				this.Tools.AXIOS({
          url: 'address/def',
          success: function (res) {
						_this.addresslist = res.data.data;
          }
        })
			},
			//获取商品详情
			inproductdetail(){
        let params = this.spec_id_url? {page:'product_detail', spec_id: this.spec_id_url}: {};
				var _this = this;
				this.Tools.AXIOS({
					url: 'order/checkout',
					transformRequest: params,
					success: function (res) {
						_this.shopdetail = res.data.data;
						_this.shopInfo = res.data.data.shop_info;
						_this.needPay = parseFloat(res.data.data.total_money) + parseFloat(res.data.data.shop_info.express_money);
					},error(){}
				})
            },
        //选择收货地址
      inCheckaddress(){
				this.$router.push({path:'addressList',query:{type:1}});
      },
			//提交订单
			placeOrder(){
        var _this = this;
        if(_this.postButton == false) return;
				if(this.addresslist == 0){
					this.$toast({message: '请选择收货地址！', position: 'bottom',duration: 1500})
				}else{
					// Dialog.confirm({
					// title: '温馨提示',
					// message: '确认订单将扣除'+this.shopdetail.pay_point+'积分'
					// }).then(() => {
            let params = {
              address_id: this.addresslist.id,  //地址id
              checkout_type: this.checkout_type,
              express_type: this.express_type
            };
            if(this.spec_id_url){
              let temp = {
                ...params,
                page: 'product_detail',
                spec_id: this.spec_id_url
              }
              params = temp;
            }
            this.postButton = false;
						this.Tools.AXIOS({
							url: 'order/add',
							transformRequest: params,
							success: function (res) {
                _this.postButton = true;
                _this.orderNo = res.data.data;
								_this.$toast.success('下单成功，请尽快支付！');
								setTimeout(function(){
									window.location.href = '#/orderDetails?id=' + _this.orderNo;
									// window.sessionStorage.removeItem("product_id");  //清除product_id
								},3000)
							},error(){_this.postButton = true;}
						})
					// });
 				}
			},
      changeExpressType(express_type){
        if(express_type == 1){
          this.needPay = parseFloat(this.shopdetail.total_money) + parseFloat(this.shopInfo.express_money);
        }
        if(express_type == 2){
          this.needPay = parseFloat(this.shopdetail.total_money);
        }
      }
		},
		components: {
			HeadTitle,
			Dialog,
      Radio,
      RadioGroup
		},
	}
</script>
<style scoped>
	.orderdetail{ width: 100%; margin-bottom: 2rem;}
	.orderdetail .adddelation{ padding: .5rem .3rem; background: #fff; position: relative; border-bottom: 1px solid #F9F9F9;}
	.orderdetail .adddelation span{ overflow: hidden; display: block;}
	.orderdetail .adddelation span h2{ font-size: .35rem; font-weight: normal; color: #323232; margin-bottom: .4rem;}
	.orderdetail .adddelation p{ display: block; width: 85%; color: #666; font-size: .35rem;}
	.orderdetail .adddelation i{ position: absolute; color: #c7c7cc; right: .3rem; top: 1.25rem;}
	.orderdetail .productdetail{ padding: .3rem; overflow: hidden; position: relative; border-bottom: 1px solid #ececec;}
	.orderdetail .productdetail i{ width: 30%;}
	.orderdetail .productdetail i img{ width: 100%; }
	.orderdetail .productdetail span{ width: 65%; font-size: .35rem; margin: 0 2%; color: #666;}
	.orderdetail .productdetail span p{ width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
	.orderdetail .productdetail span label{ margin-top: .1rem; display: block; color: #B1A99C; font-size: .32rem;}
	.orderdetail .productdetail b{ position: absolute; font-weight: normal; font-size: .5rem; right: .5rem; top: 1.7rem; color: #ea8800;}
	.orderdetail .buynub{ width: 100%; background-color: #fff; padding: .4rem 0; overflow: hidden;}
	.orderdetail .buynub h3{ font-size: .35rem; margin-left: .3rem; font-weight: normal; line-height: .3rem; color: red;}
	.orderdetail .buynub div{ margin-right: .5rem; height: .6rem; border: 1px solid #ac956c; border-radius: 3px;}
	.orderdetail .buynub div span{ text-align: center; height: .6rem; line-height: .6rem;}
	.orderdetail .buynub div span:nth-of-type(1){ border-right: 1px solid #ac956c;}
	.orderdetail .buynub div span:nth-of-type(2){ border-left: 1px solid #ac956c;}
	.orderdetail .buynub div span i{ padding:0 .2rem; color: #ac956c; }
	.orderdetail .buynub div input{ margin: 0 .4rem; background:none; font-size: .36rem; line-height: .6rem;}
	.allOrder{ width: 100%; position: fixed; bottom: 0; left: 0; border-top: 1px solid #E5E5E5; background-color: #fff;}
	.allOrder p{ font-size: .35rem; color: #666; margin: .5rem .3rem 0;}
	.allOrder p label{ font-size: .35rem; color: #ea8800; }
	.sumbOrder{ width: 30%; text-align: center; color: #fff; font-size: .35rem; background-color: #ea8800; padding: .5rem 0;}
  .isradio{ width:75%; display: flex; margin-top: .1rem;}.ptcheck{ margin-left: 6%;}.margin_r{margin-right: 6%;}
  .c-title{ margin-bottom: .2rem;color: #999;}
  .express-tips{ color: #ea8800;margin-top: .1rem;}
  .product-t{    color: #666;font-size: .35rem;padding: 0 .2rem;background-color: #f6f6f6;}
  .product-t i{color: #ea8800;font-style:normal}
</style>
